<template>
	<view class="page">

		<view class="no_house" v-if="list_length==0">
			<image src="../../static/img/house/top@2x.png" class="top_bj" mode="widthFix">
				<view class="top" @click="_navigateTo('/pages/house/add')">
					<view class="top_top">试试您的房子值多少钱</view>
					<view class="top_box">
						<p><i></i><span>全年趋势</span></p>
						<p><i></i><span>收益预估</span></p>
						<p><i></i><span>涨幅排名</span></p>
					</view>
					<view class="top_footer">
						快速估价 <i></i>
					</view>
				</view>

				<view class="head">
					<view class="head_top">我家小区房源</view>
					<view class="head_title">
						<view class="head_title_box head_title_box_left">
							<p><em>*6</em><b>套</b><i></i></p>
							<span>全网在售</span>
						</view>
						<view class="head_title_box head_title_box_center">
							<p><em>*6</em><b>套</b><i></i></p>
							<span>全网在租</span>
						</view>
						<view class="head_title_box head_title_box_right">
							<p><em>*6</em><b>套</b><i></i></p>
							<span>近期成交</span>
						</view>
					</view>

					<view class="head_box_title">近期成交</view>
					<view class="head_boxs">

						<view class="head_box">
							<view class="head_box_left">
								<view class="head_box_left_top">****小区</view>
								<view class="head_box_left_footer">
									<p>南北丨中楼层/*层丨86.9m²</p>
									<p>成交价：**5万</p>
								</view>
							</view>
							<view class="head_box_right">
								<image src="../../static/img/house/img@2x.png" class="head_box_right_img"
									mode="widthFix">
							</view>
						</view>

						<view class="head_box">
							<view class="head_box_left">
								<view class="head_box_left_top">****小区</view>
								<view class="head_box_left_footer">
									<p>南北丨中楼层/*层丨86.9m²</p>
									<p>成交价：**5万</p>
								</view>
							</view>
							<view class="head_box_right">
								<image src="../../static/img/house/img@2x.png" class="head_box_right_img"
									mode="widthFix">
							</view>
						</view>

						<view class="head_box">
							<view class="head_box_left">
								<view class="head_box_left_top">****小区</view>
								<view class="head_box_left_footer">
									<p>南北丨中楼层/*层丨86.9m²</p>
									<p>成交价：**5万</p>
								</view>
							</view>
							<view class="head_box_right">
								<image src="../../static/img/house/img@2x.png" class="head_box_right_img"
									mode="widthFix">
							</view>
						</view>

					</view>

					<view class="head_bt" @click="_navigateTo('/pages/house/add')">添加我的房子，查看小区成交情况</view>
				</view>


				<view class="main">
					<view class="main_top">
						<p @click="_navigateTo()"><i>淮安新房行情</i><em>{{last_month}}月</em></p>
						<span><em></em><i>更多解读</i></span>
					</view>
					<view class="main_title">
						<view class="main_title_box main_title_box_left">
							<p><em>{{lastMonthData.avPrice}}</em><b>万元/m²</b></p>
							<span>{{last_month}}月在售均价</span>
						</view>
						<view class="main_title_box main_title_box_center">
							<p><em>{{lastMonthData.total}}</em><b>套</b></p>
							<span>{{last_month}}月上新房源</span>
						</view>
						<view class="main_title_box main_title_box_right">
							<p><em>{{lastMonthData.totalAppoints}}</em><b>人</b></p>
							<span>看房人数</span>
						</view>
					</view>
					<view class="main_footer">
						<span>{{lastMonthData.resStr}}</span>
						<p>{{lastMonthData.desStr}}
							<i>近三年走势</i>
						</p>
					</view>


				</view>

				<view class="footer">
					<view class="main_top">
						<p><i>我家小区行情</i><em>{{last_month}}月</em></p>
					</view>
					<view class="footer_box" @click="_navigateTo('/pages/house/add')">
						<image src="../../static/img/house/chart@2x.png" class="footer_box_img" mode="widthFix">
							<image src="../../static/img/house/look@2x.png" class="footer_box_ico" mode="widthFix">
								<view class="footer_box_text">添加房子解锁 [我家小区行情]</view>
								<view class="footer_box_bt">立即解锁<i></i></view>
					</view>

				</view>
		</view>
		<block v-else>


			<image src="../../static/img/house/top_serverbj.png" class="top_bj" mode="widthFix">
				<view class="top">
					<view class="top_title"><em>我的家</em><i v-if="list_length">{{list_length}}</i></view>
					<view class="toptag">
						<p @click="_navigateTo('/pages/house/my')"><i></i>管理我家</p>
						<p @click="_subscribe()">立即订阅</p>
					</view>
				</view>
				<view class="heads_box" v-if="list">



					<block v-if="list_length==1">
						<view class="heads">
							<view class="head head_one" v-for="(item,index) in list" :key="index"
								@click="select_house(item.srid)">
								<view class="head_left">
									<p>{{item.room}}室{{item.room}}厅{{item.toilet}}卫丨{{item.direction?item.direction:'暂无数据'}}丨{{item.square}}m²
									</p>
									<span>{{item.srname}}</span>
								</view>
								<image :src="item.coverUrl?item.coverUrl:'../../static/img/house/200.png'"
									class="head_right" mode="widthFix">
									<view class="head_footer_left">
										<p>房产估价</p>
										<span>{{transfer(item.evaluatePrice)}}<em>万</em></span>
										<i></i>
									</view>

									<view class="head_footer_right">
										<p v-if="!item.comparePrice"><i>比上月：</i>暂无对比数据</p>
										<p v-else><i>比上月：</i>估价<b>{{transfer_last(item.comparePrice)}}万</b><em
												:class="transfer_ico(item.comparePrice)?'up':'down'"></em></p>
										<p v-if="!item.compareRentPrice"><i>月租金：</i><b>暂无数据</b></p>
										<p v-else><i>月租金：</i><b>{{item.compareRentPrice}}元/平/月</b></p>
									</view>
							</view>
						</view>
					</block>


					<block v-else>
						<swiper class="swiper_boxs" circular :indicator-dots="false" :autoplay="false" :duration="300"
							next-margin="60rpx" :current="swiper_current">
							<block v-for="(item,index) in list" :key="index">
								<swiper-item class="swiper_box">
									<view class="head" @click="select_house(item.srid,index)">
										<view class="head_left">
											<p>{{item.room}}室{{item.room}}厅{{item.toilet}}卫丨{{item.direction?item.direction:'暂无数据'}}丨{{item.square}}m²
											</p>
											<span>{{item.srname}}</span>
										</view>
										<image :src="item.coverUrl?item.coverUrl:'../../static/img/house/200.png'"
											class="head_right" mode="widthFix">
											<view class="head_footer_left">
												<p>房产估价</p>
												<span>{{transfer(item.evaluatePrice)}}<em>万</em></span>
												<i></i>
											</view>

											<view class="head_footer_right">
												<p v-if="!item.comparePrice"><i>比上月：</i>暂无对比数据</p>
												<p v-else><i>比上月：</i>估价<b>{{transfer_last(item.comparePrice)}}万</b><em
														:class="transfer_ico(item.comparePrice)?'up':'down'"></em></p>
												<p v-if="!item.compareRentPrice"><i>月租金：</i><b>暂无数据</b></p>
												<p v-else><i>月租金：</i><b>{{item.compareRentPrice}}元/平/月</b></p>
											</view>
									</view>
								</swiper-item>
							</block>

						</swiper>
					</block>

				</view>
				<!-- 		<view class="box_more box_more_top" v-if="list.length>2" @click="_navigateTo()">
				查看我的其他房源<i></i>
			</view> -->




				<view class="main main_server">
					<view class="main_top" @click="_navigateTo()">
						<p><i>我家小区房源</i></p><span><em></em><i>小区详情</i></span>
					</view>
					<view class="tab">
						<view class="tabs" v-if="getNearRoomsBySrid">
							<p v-for="(item,index) in getNearRoomsBySrid" :key="index" :class="tab==index?'active':''"
								@click="_tab(index)">{{item.buildName}}({{metersToKilometers(item.distance)}}km)
								<i></i>
							</p>
						</view>
					</view>

					<view class="tags" v-if="itembox">
						<view :class="tabhas==1?'tag active':'tag'" @click="_tabhas(1,itembox.hasSoldInfos)">
							<p>{{getlength(itembox.hasSoldInfos)}}套</p><span>成交房源</span>
						</view>
						<view :class="tabhas==2?'tag active':'tag'" @click="_tabhas(2,itembox.onSaleInfos)">
							<p>{{getlength(itembox.onSaleInfos)}}套</p><span>在售房源</span>
						</view>
						<view :class="tabhas==3?'tag active':'tag'" @click="_tabhas(3,itembox.onRentInfos)">
							<p>{{getlength(itembox.onRentInfos)}}套</p><span>在租房源</span>
						</view>
					</view>

					<block v-for="(item,index) in boxs" :key="index">
						<view class="box" @click="_navigateTo()">
							<view class="box_left">
								<image :src="item.cover?item.cover:'../../static/img/house/200.png'" class="box_leftimg"
									mode="widthFix">
									<!-- <i>户型标签</i> -->
							</view>
							<view class="box_right">
								<view class="box_right_top">
									{{item.room?item.room:'0'}}室{{item.hall?item.hall:'0'}}厅丨{{item.square?item.square+'m²丨':'暂无数据丨'}}{{item.direction?item.direction:'暂无数据'}}
								</view>
								<view class="box_right_head">
									{{item.direction?item.direction+'丨':'暂无数据丨'}}{{item.floorDes?item.floorDes+'楼层丨':'暂无数据丨'}}{{item.floor?item.floor+'层丨':'暂无数据丨'}}{{item.square?item.square+'m²':'暂无数据'}}
								</view>
								<view class="box_right_main">
									<block v-if="tabhas==1">
										签约日期:<block v-if="item.tradeDate">{{item.tradeDate}}成交</block>
										<block v-else>暂无数据</block>
									</block>
									<block v-if="tabhas==2">
										上架日期 :<block v-if="item.tradeDate">{{item.tradeDate}}</block>
										<block v-else>暂无数据</block>
									</block>
									<block v-if="tabhas==3">
										上架日期 :<block v-if="item.tradeDate">{{item.tradeDate}}</block>
										<block v-else>暂无数据</block>
									</block>
								</view>
								<view class="box_right_foot">
									<block v-if="tabhas==1">成交总价</block>
									<block v-if="tabhas==2">在售价格</block>
									<block v-if="tabhas==3">在租价格</block>
									<span v-if="tabhas==1 ||tabhas==2">{{transfer(item.totalPrice)}}万</span>
									<span v-if="tabhas==3">{{item.totalPrice}}元/月</span>
								</view>
							</view>
						</view>
					</block>





					<view class="box_more" v-if="tabhas==1 && itembox.hasSoldInfos != 0" @click="_navigateTo()">
						查看{{getlength(itembox.hasSoldInfos)}}套成交房源 <i></i>
					</view>

					<view class="box_more" v-if="tabhas==2 && itembox.onSaleInfos != 0" @click="_navigateTo()">
						查看{{getlength(itembox.onSaleInfos)}}套在售房源 <i></i>
					</view>

					<view class="box_more" v-if="tabhas==3 && itembox.onRentInfos != 0" @click="_navigateTo()">
						查看{{getlength(itembox.onRentInfos)}}套在租房源 <i></i>
					</view>


				</view>



				<view class="run">
					<view class="run_top">资产管理</view>
					<view class="run_box" @click="_navigateTo()">
						<image src="../../static/img/house/serve_mony.png" class="run_boximg" mode="widthFix">
							<view class="run_box_right">
								<p>我要卖房<i></i></p>
								<span>极速响应，隐私保护</span>
							</view>
							<em></em>
					</view>
					<view class="run_box" @click="_navigateTo()">
						<image src="../../static/img/house/serve_shop.png" class="run_boximg" mode="widthFix">
							<view class="run_box_right">
								<p>我要出租<i></i></p>
								<span>快速上架，海量租客</span>
							</view>
					</view>
				</view>

				<view class="main">
					<view class="main_top" @click="_navigateTo()">
						<p><i>淮安新房行情</i><em>{{last_month}}月</em></p><span><em></em><i>更多解读</i></span>
					</view>
					<view class="main_title">
						<view class="main_title_box main_title_box_left">
							<p><em>{{lastMonthData.avPrice}}</em><b>万元/m²</b></p>
							<span>{{last_month}}月在售均价</span>
						</view>
						<view class="main_title_box main_title_box_center">
							<p><em>{{lastMonthData.total}}</em><b>套</b></p>
							<span>{{last_month}}月上新房源</span>
						</view>
						<view class="main_title_box main_title_box_right">
							<p><em>{{lastMonthData.totalAppoints}}</em><b>人</b></p>
							<span>看房人数</span>
						</view>
					</view>
					<view class="main_footer">
						<span>{{lastMonthData.resStr}}</span>
						<p>{{lastMonthData.desStr}}<i>近三年走势</i></p>
					</view>
				</view>



				<view class="main main_list">
					<view class="main_top" @click="_navigateTo()">
						<p><i>我家小区行情</i><em>{{last_month}}月</em></p><span><em></em><i></i></span>
					</view>
					<view class="tab">
						<p :class="main_list_tab==1?'active':''" @click="_main_list_tab(1)">出售行情
							<i></i>
						</p>
						<p :class="main_list_tab==2?'active':''" @click="_main_list_tab(2)">出租行情
							<i></i>
						</p>
					</view>

					<!-- 出售行情 -->
					<view class="footboxs" v-if="main_list_tab==1">
						<view class="footbox">
							<view class="footbox_top">{{last_month}}月在售均价</view>
							<view class="footbox_main">
								{{transfer(statiscData.lastAvPrice?statiscData.lastAvPrice:0)}}<span>万元/m²</span>
							</view>
							<view class="footbox_foot">
								比上月
								<block v-if="statiscData.compareAvPrice">
									<span
										:class="transfer_ico(statiscData.compareAvPrice)?'up':''">{{statiscData.compareAvPrice}}%</span><em
										:class="transfer_ico(statiscData.compareAvPrice)?'up':'down'"></em>
								</block>
								<block v-else>
									暂无数据
								</block>

							</view>
						</view>
						<view class="footbox">
							<view class="footbox_top">{{last_month}}月上架房源</view>
							<view class="footbox_main">{{statiscData.lastRooms?statiscData.lastRooms:0}}<span>套</span>
							</view>
							<view class="footbox_foot">
								比上月
								<block v-if="statiscData.compareRooms">
									<span
										:class="transfer_ico(statiscData.compareRooms)?'up':''">{{statiscData.compareRooms}}</span><em
										:class="transfer_ico(statiscData.compareRooms)?'up':'down'"></em>
								</block>
								<block v-else>
									暂无数据
								</block>
							</view>
						</view>
						<view class="footbox">
							<view class="footbox_top">看房客户</view>
							<view class="footbox_main">
								{{statiscData.lastAppoints?statiscData.lastAppoints:0}}<span>人</span>
							</view>
							<view class="footbox_foot">
								比上月
								<block v-if="statiscData.comparePerson">
									<span
										:class="transfer_ico(statiscData.comparePerson)?'up':''">{{transfer_ico(statiscData.comparePerson)?'+':''}}{{statiscData.comparePerson}}</span><em
										:class="transfer_ico(statiscData.comparePerson)?'up':'down'"></em>
								</block>
								<block v-else>
									暂无数据
								</block>
							</view>
						</view>
					</view>


					<view class="lists" v-if="main_list_tab==1">
						<view class="list">
							<view class="list_tags">
								价格解读
							</view>
							<view class="list_title">{{statiscData.priceResStr?statiscData.priceResStr:'暂无数据'}}</view>
							<view class="list_main">{{statiscData.priceDesStr?statiscData.priceDesStr:''}}
								<!-- <span>近三年走势</span> -->
							</view>
						</view>
						<view class="list">
							<view class="list_tags">
								供需解读
							</view>
							<view class="list_title">{{statiscData.suplyResStr?statiscData.suplyResStr:'暂无数据'}}</view>
							<view class="list_main">{{statiscData.suplyDesStr?statiscData.suplyDesStr:'暂无数据'}}</view>
						</view>
					</view>

					<!-- 				<view class="charts-box" v-if="main_list_tab==1">
					<qiun-data-charts type="column" :opts="opts" :chartData="chartData" tooltipFormat="mytooltip" />
				</view>
				 -->




					<!-- 出租行情 -->
					<view class="footboxs" v-if="main_list_tab==2">
						<view class="footbox">
							<view class="footbox_top">{{last_month}}月租房均价</view>
							<view class="footbox_main">
								{{statiscData.lastRentAvPrice?statiscData.lastRentAvPrice:0}}<span>元/月</span>
							</view>
							<view class="footbox_foot">
								比上月
								<block v-if="statiscData.compareRentAvPrice">
									<span
										:class="transfer_ico(statiscData.compareRentAvPrice)?'up':''">{{statiscData.compareRentAvPrice}}%</span><em
										:class="transfer_ico(statiscData.compareRentAvPrice)?'up':'down'"></em>
								</block>
								<block v-else>
									暂无数据
								</block>

							</view>
						</view>
						<view class="footbox">
							<view class="footbox_top">{{last_month}}月上新套数</view>
							<view class="footbox_main">
								{{statiscData.lastRentRooms?statiscData.lastRentRooms:0}}<span>套</span>
							</view>
							<view class="footbox_foot">
								比上月
								<block v-if="statiscData.compareRentRooms">
									<span
										:class="transfer_ico(statiscData.compareRentRooms)?'up':''">{{statiscData.compareRentRooms}}</span><em
										:class="transfer_ico(statiscData.compareRentRooms)?'up':'down'"></em>
								</block>
								<block v-else>
									暂无数据
								</block>
							</view>
						</view>
						<view class="footbox">
							<view class="footbox_top">看房客户</view>
							<view class="footbox_main">
								{{statiscData.lastRentPerson?statiscData.lastRentPerson:0}}<span>人</span>
							</view>
							<view class="footbox_foot">
								比上月
								<block v-if="statiscData.compareRentPerson">
									<span
										:class="transfer_ico(statiscData.compareRentPerson)?'up':''">{{transfer_ico(statiscData.compareRentPerson)?'+':''}}{{statiscData.compareRentPerson}}</span><em
										:class="transfer_ico(statiscData.compareRentPerson)?'up':'down'"></em>
								</block>
								<block v-else>
									暂无数据
								</block>
							</view>
						</view>
					</view>


					<view class="lists" v-if="main_list_tab==2">
						<view class="list">
							<view class="list_tags">
								价格解读
							</view>
							<view class="list_title">
								{{statiscData.compareRentPriceResStr?statiscData.compareRentPriceResStr:'暂无数据'}}</view>
							<view class="list_main">
								{{statiscData.compareRentPriceDesStr?statiscData.compareRentPriceDesStr:''}}
								<!-- <span>近三年走势</span> -->
							</view>
						</view>
						<view class="list">
							<view class="list_tags">
								供需解读
							</view>
							<view class="list_title">
								{{statiscData.compareRentSuplyResStr?statiscData.compareRentSuplyResStr:'暂无数据'}}</view>
							<view class="list_main">
								{{statiscData.compareRentSuplyDesStr?statiscData.compareRentPriceResStr:''}}</view>
						</view>
					</view>

					<view class="charts-box" v-if="chartData_categories.length>0">
						<qiun-data-charts type="column" :opts="opts" :chartData="chartData" tooltipFormat="mytooltip" />
					</view>

					<view class="box_more" @click="_navigateTo()">
						小区深度行情解读<i></i>
					</view>

				</view>
				<div class="hr"></div>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiper_current:0,
				boxs: undefined,
				tabhas: 1,
				last_month: "",
				list_length: '',
				list: "",
				srid: "",
				lastMonthData: "",
				tab: 0,
				main_list_tab: 1,
				chartData: {},
				getNearRoomsBySrid: "",
				itembox: "",
				statiscData: "",
				chartData_categories: "",
				//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#2DD781", "#0073FF"],
					padding: [15, 15, 0, 15],
					enableScroll: false,

					dataLabel: false,
					legend: {},
					xAxis: {
						disableGrid: true,
						axisLineColor: "rgba(255,131,14,0.3)",
					},
					yAxis: {
						disabled: true,
						splitNumber: 4,
						// showTitle:false,
						gridColor: "rgba(255,131,14,0.3)",
						data: [{
							min: 0,
						}]
					},

					extra: {
						column: {
							type: "group",
							width: 12,
							seriesGap: 3,
							// activeBgColor: "#000000",
							// activeBgOpacity: 0.08,
							// barBorderCircle:true,
							barBorderRadius: [
								3,
								3,
								0,
								0
							]
						}
					},
					tooltip: {
						showBox: true
					}
				}
			}
		},
		onLoad(e) {
			let that = this;
			that.srid = e.srid
			that._last_month();
			that._list()
			that._lastMonthData()
			that._getNearRoomsBySrid()
			that._getStatiscData()
		},
		onReady() {
			let that = this;

		},
		methods: {
			//切换家
			select_house(e,index) {
				let that = this;
				that.swiper_current = index
				that.srid = e
				that._last_month();
				that._list()
				that._lastMonthData()
				that._getNearRoomsBySrid()
				that._getStatiscData()

				that.tabhas = 1
				that.tab = 0
				that.main_list_tab = 1
			},


			// 我家小区行情 -- 页面最底部
			_getStatiscData() {
				let that = this

				let trade = '出售'
				if (that.main_list_tab == 2) {
					trade = '出租'
				}

				if (!that.srid) {
					return
				}
				that.api.get('mhc/getStatiscData/' + that.srid + '?trade=' + trade).then(res => {


					let temp = JSON.parse(res.data)
					console.log("last", temp);
					that.statiscData = temp


					if (that.main_list_tab == 1) {
						that.getServerData(temp.statisticData)
					} else {
						that.getServerData(temp.statisticRentData)
					}


				})
			},

			//切换
			_tabhas(id, e) {
				this.tabhas = id
				let firstFiveElements = e.slice(0, 5);
				console.log("firstFiveElements", firstFiveElements);
				this.boxs = firstFiveElements
			},
			// 上个月的日期
			_last_month() {
				// 获取当前日期  
				let currentDate = new Date();
				// 获取上个月的日期  
				let previousMonth = currentDate.getMonth();
				// 输出上个月的日期  
				this.last_month = previousMonth.toLocaleString()
			},
			// 是否3位小数
			hasThreeDecimalPlaces(num) {
				var str = num.toFixed(3); // 将数字舍入到3位小数并转换为字符串  
				return str.indexOf('.') !== -1; // 检查字符串中是否包含"."  
			},

			//判断下降
			transfer_last(e) {
				let str = e;
				str = str.replace(/\+/g, ''); // 去掉所有的"+"  
				str = str.replace(/-/g, ''); // 去掉所有的"-" 
				str = str / 10000
				let temp = this.hasThreeDecimalPlaces(str)
				if (str) {
					str = parseFloat(str.toFixed(2))
				}
				return str;

			},
			//判断上升还是下降图标
			transfer_ico(e) {
				let temp = e + ''
				if (temp.indexOf('-') != -1) {
					return false
				} else {
					return true
				}


			},
			// 长度
			getlength(e) {
				if (e) {
					return e.length
				} else {
					return 0
				}

			},
			// 米转千米
			metersToKilometers(e) {
				let str = e / 1000
				let temp = this.hasThreeDecimalPlaces(str)
				if (str) {
					str = parseFloat(str.toFixed(2))
				}
				return str;
			},
			// 元转万
			transfer(e) {
				let str = e / 10000
				let temp = this.hasThreeDecimalPlaces(str)
				if (str) {
					str = parseFloat(str.toFixed(2))
				}
				return str;

			},

			// 我的家-顶部家列表数据展示
			_list() {
				let that = this
				that.api.get('mhc/list').then(res => {

					let temp = JSON.parse(res.data)
					that.list = temp
					that.list_length = temp.length
					console.log("temp", temp);
				})
			},


			// 我的家-顶部家列表数据展示
			_getNearRoomsBySrid() {
				let that = this
				if (!that.srid) {
					return
				}
				that.api.get('mhc/getNearRoomsBySrid/' + that.srid).then(res => {
					let temp = JSON.parse(res.data)
					if (temp) {
						that.getNearRoomsBySrid = temp
						this.itembox = temp[0]

						let firstFiveElements = temp[0].hasSoldInfos
						firstFiveElements = firstFiveElements.slice(0, 5);

						this.boxs = temp[0].hasSoldInfos
					}
					// console.log(this.itembox);
					// console.log("getNearRoomsBySrid",temp);
				})
			},
			// 淮安新房行情--上月
			_lastMonthData() {
				let that = this
				that.api.get('mhc/lastMonthData').then(res => {
					that.lastMonthData = JSON.parse(res.data)
				})
			},


			//订阅
			_subscribe() {
				console.log("订阅");
			},

			// 跳页
			_navigateTo(e) {
				uni.navigateTo({
					url: e
				});
			},
			//小区切换
			_tab(e) {
				this.tab = e
				this.itembox = this.getNearRoomsBySrid[e]
				console.log(this.itembox);
			},
			// 行情切换
			_main_list_tab(e) {
				this.main_list_tab = e
				this._getStatiscData()
			},
			// 柱状图
			getServerData(e) {
				let that = this

				let res = {
					categories: [],
					series: [{
							name: "本月上架房源",
							data: []
						},
						{
							name: "本月看房人数",
							data: []
						}
					]
				};
				let temp = e
				let categories = []
				let series_home = []
				let series_look = []
				temp.forEach((e) => {
					let dateStr = e.day
					let parts = dateStr.split("-");
					let month = parts.pop();
					if (month.startsWith("0")) {
						month = month.slice(1); // 从索引1开始切片，即删除第一个字符  
					}
					month = month + '月'
					categories.push(month)
					if (e.rooms) {
						series_home.push(e.rooms)
					} else {
						series_home.push(0)
					}
					if (e.person) {
						series_look.push(e.person)
					} else {
						series_look.push(0)
					}
				})
				that.chartData_categories = categories
				setTimeout(() => {
					res.categories = categories
					res.series[0].data = series_home
					res.series[1].data = series_look
					console.log("res", res);
					that.chartData = JSON.parse(JSON.stringify(res));
				}, 1000);


				//模拟从服务器获取数据时的延时
				// setTimeout(() => {
				// 	模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				// 	let res = {
				// 		categories: ["11月", "1月", "3月", "5月", "7月", "9月"],
				// 		series: [{
				// 				name: "本月上架房源",
				// 				data: [135, 116, 131, 133, 113, 134]
				// 			},
				// 			{
				// 				name: "本月看房人数",
				// 				data: [118, 127, 121, 124, 16, 128]
				// 			}
				// 		]
				// 	};
				// 	that.chartData = JSON.parse(JSON.stringify(res));
				// }, 1000);
			},
		}
	}
</script>r

<style lang="scss">
	.no_house {
		position: relative;
	}

	.no_house {

		.footer {
			width: 686rpx;
			height: auto;
			background: #FFFFFF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			opacity: 1;
			margin: 0 32rpx 16rpx;
			display: block;
			float: left;
			position: relative;
		}


		.footer_box {
			width: 654rpx;
			height: 368rpx;
			display: block;
			float: left;
			margin: 14rpx 16rpx 32rpx;
			position: relative;
		}

		.footer_box_img {
			width: 654rpx;
			height: 368rpx;
			display: block;
			float: left;
			position: absolute;
			top: 0;
			left: 0;
		}

		.footer_box_ico {
			width: 60rpx;
			height: 60rpx;
			display: block;
			float: left;
			position: absolute;
			top: 66rpx;
			left: 304rpx;
		}

		.footer_box_text {
			width: 100%;
			display: block;
			float: left;
			position: absolute;
			top: 162rpx;
			left: 0;
			text-align: center;
			height: 36rpx;
			font-size: 26rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #919191;
			line-height: 36rpx;
		}

		.footer_box_bt {
			width: 322rpx;
			height: 80rpx;
			background: #FE5700;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			opacity: 1;
			line-height: 80rpx;
			position: absolute;
			top: 240rpx;
			left: 172rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #FFFFFF;
			text-align: center;
		}

		.footer_box_bt i {
			width: 10rpx;
			height: 16rpx;
			display: inline-block;
			margin: 20rpx 0 0 6rpx;
			background: url(../../static/img/house/rightw@2x.png) no-repeat;
			background-size: 100%;
		}

		.main_footer {
			width: 626rpx;
			height: auto;
			display: block;
			float: left;
			margin: 0 24rpx 32rpx;
		}

		.main_footer span {
			width: 100%;
			height: auto;
			display: block;
			float: left;
			margin: 0 0 16rpx;
			height: auto;
			font-size: 26rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #000000;
			line-height: 36rpx;
		}

		.main_footer p {
			width: 100%;
			height: auto;
			display: block;
			float: left;
			margin: 0 0 0;
			height: auto;
			font-size: 22rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #919191;

			line-height: 32rpx;
		}

		.main_footer p i {
			color: #FE5700;
			display: inline;
		}

		.main_title {
			width: 638rpx;
			height: 80rpx;
			display: block;
			float: left;
			margin: 30rpx 0 20rpx 20rpx;
			padding: 0 0 20rpx;
			border-bottom: 1rpx solid #BEBEBE;
			position: relative;
		}

		.main_box_title {
			width: 100%;
			height: auto;
			padding: 0 24rpx 0;
			box-sizing: border-box;
			font-size: 28rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #000000;
			line-height: 40rpx;
			display: block;
			float: left;
		}



		.main_title_box {
			width: 275rpx;
			height: auto;
			display: block;
			float: left;
			box-sizing: border-box;
			position: absolute;
			top: 0;
			left: 0;
			text-align: left;
		}

		.main_title_box_center {
			left: 275rpx;
		}

		.main_title_box_right {
			right: 0;
			text-align: right;
			left: auto;
		}

		.main_title_box p {
			width: 100%;
			height: auto;
			display: inline-block;
		}

		.main_title_box span {
			width: 100%;
			height: auto;
			display: inline-block;
			margin: 0 0 0 0;
			font-size: 22rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
			line-height: 32rpx;
		}

		.main_title_box p em {
			width: auto;
			height: auto;
			font-size: 40rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: bold;
			color: #000000;
			line-height: 40rpx;
			display: inline-block;
			font-style: normal;
		}

		.main_title_box p b {
			width: auto;
			height: auto;
			font-size: 22rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: bold;
			color: #000000;
			line-height: 22rpx;
			margin: 7rpx 4rpx 0 0;
			display: inline-block;
			font-style: normal;
		}

		.main_title_box p i {
			width: 10rpx;
			height: 16rpx;
			display: inline-block;
			margin: 20rpx 0 0 0;
			background: url(../../static/img/house/right@2x.png) no-repeat;
			background-size: 100%;
		}

		.main_title_box_right span {
			maring-right: 40rpx;
			padding-right: 33rpx;
			box-sizing: border-box;
		}






		.main {
			width: 686rpx;
			height: auto;
			background: #FFFFFF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			opacity: 1;
			margin: 0 32rpx 16rpx;
			display: block;
			float: left;
		}

		.main_top {
			width: 100%;
			height: auto;
			padding: 28rpx 24rpx 0;
			box-sizing: border-box;
			font-size: 32rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #000000;
			line-height: 44rpx;
			display: block;
			float: left;
			margin: 5rpx 0 0 0;
		}

		.main_top p {
			width: auto;
			height: 44rpx;
			display: block;
			float: left;
		}

		.main_top p i {
			width: auto;
			height: 44rpx;
			display: block;
			float: left;
			line-height: 44rpx;
			margin: -8rpx 0 0 0;
		}

		.main_top p em {
			width: auto;
			height: 30rpx;
			border-radius: 16rpx 16rpx 16rpx 0rpx;
			opacity: 1;
			border: 2rpx solid #FE5700;
			padding: 0 5rpx;
			box-sizing: border-box;
			font-size: 22rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #FE5700;
			line-height: 30rpx;
			display: block;
			float: left;
			margin: 0rpx 0 0 5rpx;
		}


		.main_top span {
			width: auto;
			height: 34rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #919191;
			line-height: 34rpx;
			display: block;
			float: right;
		}

		.main_top span i {
			width: auto;
			height: auto;
			display: block;
			float: right;
		}

		.main_top span em {
			width: 10rpx;
			height: 16rpx;
			display: inline-block;
			float: right;
			margin: 10rpx 0 0 10rpx;
			background: url(../../static/img/house/righth@2x.png) no-repeat;
			background-size: 100%;
		}

		.head_boxs {
			width: 638rpx;
			height: 170rpx;
			display: block;
			float: left;
			overflow-y: hidden;
			overflow-x: auto;
			white-space: nowrap;
			margin: 0 20rpx 20rpx;
		}

		.head_box {
			width: 452rpx;
			height: 168rpx;
			display: inline-block;
			margin: 0 16rpx 0 0;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 1rpx solid rgba(190, 190, 190, 0.5);
			box-sizing: border-box;
		}

		.head_box_right {
			width: 120rpx;
			height: 122rpx;
			display: block;
			float: right;
			margin: 32rpx 8rpx 0 0;
		}

		.head_box_right_img {
			width: 120rpx;
			height: 122rpx;
			display: block;
			float: right;
		}

		.head_box_left {
			width: 274rpx;
			height: auto;
			display: block;
			float: left;
			margin: 32rpx 0 0 30rpx;
		}

		.head_box_left_top {
			width: 100%;
			height: auto;
			display: block;
			float: left;
			margin: 0 0 4rpx 0;
			font-size: 28rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #000000;
			line-height: 40rpx;
		}

		.head_box_left_footer {
			width: 100%;
			height: auto;
			display: block;
			float: left;
			margin: 0 0 0 0;
			font-size: 22rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			line-height: 32rpx;
		}

		.head_bt {
			width: 638rpx;
			height: 80rpx;
			background: rgba(254, 87, 0, 0.05);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			opacity: 1;
			margin: 0 24rpx 32rpx;
			line-height: 80rpx;
			padding: 0;
			text-align: center;
			font-size: 26rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #FE5700;
			line-height: 80rpx;
			display: block;
			float: left;
		}


		.head_title {
			width: 638rpx;
			height: 80rpx;
			display: block;
			float: left;
			margin: 30rpx 0 20rpx 20rpx;
			padding: 0 0 20rpx;
			border-bottom: 1rpx solid #F6F6F6;
			position: relative;
		}

		.head_box_title {
			width: 100%;
			height: auto;
			padding: 0 24rpx 0;
			box-sizing: border-box;
			font-size: 28rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #000000;
			line-height: 40rpx;
			display: block;
			float: left;
		}



		.head_title_box {
			width: 275rpx;
			height: auto;
			display: block;
			float: left;
			box-sizing: border-box;
			position: absolute;
			top: 0;
			left: 0;
			text-align: left;
		}

		.head_title_box_center {
			left: 275rpx;
		}

		.head_title_box_right {
			right: 0;
			text-align: right;
			left: auto;
		}

		.head_title_box p {
			width: 100%;
			height: auto;
			display: inline-block;
		}

		.head_title_box span {
			width: 100%;
			height: auto;
			display: inline-block;
			margin: 0 0 0 0;
			font-size: 22rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #919191;
			line-height: 32rpx;
		}

		.head_title_box p em {
			width: auto;
			height: auto;
			font-size: 40rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #000000;
			line-height: 40rpx;
			display: inline-block;
			font-style: normal;
		}

		.head_title_box p b {
			width: auto;
			height: auto;
			font-size: 24rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 400;
			color: #000000;
			line-height: 24rpx;
			margin: 7rpx 4rpx 0 0;
			display: inline-block;
			font-style: normal;
		}

		.head_title_box p i {
			width: 10rpx;
			height: 16rpx;
			display: inline-block;
			margin: 20rpx 0 0 0;
			background: url(../../static/img/house/right@2x.png) no-repeat;
			background-size: 100%;
		}


		.top_bj {
			width: 100%;
			height: auto;
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
		}

		.top {
			width: 686rpx;
			height: auto;
			background: #FFFFFF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			opacity: 1;
			margin: 320rpx 32rpx 16rpx;
			float: left;
			position: relative;
			z-index: 2;
		}

		.top_top {
			width: 100%;
			text-align: center;
			display: block;
			float: left;
			margin: 44rpx 0 25rpx;
			height: 56rpx;
			font-size: 40rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #000000;
			text-align: center;
			line-height: 66rpx;
		}

		.top_box {
			width: 100%;
			height: auto;
			display: block;
			text-align: center;
			margin: 0 0;
		}

		.top_box p {
			display: inline-block;
			margin: 0 20rpx;
		}

		.top_box p i {
			width: 24rpx;
			height: 24rpx;
			display: inline-block;
			margin: 0 6rpx -4rpx 0;
			background: url(../../static/img/house/ok@2x.png) no-repeat;
			background-size: 100%;
		}

		.top_box p span {
			width: auto;
			height: 34rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
			line-height: 34rpx;
			display: inline-block;
			margin: 0 0 0 0;
		}

		.top_footer {
			width: 320rpx;
			height: 80rpx;
			background: #FE5700;
			box-shadow: 0rpx 4rpx 16rpx 2rpx rgba(254, 87, 0, 0.56);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			opacity: 1;
			display: block;
			float: left;
			margin: 38rpx 0 52rpx 184rpx;
			text-align: center;
			line-height: 80rpx;
			font-size: 34rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #FFFFFF;
		}

		.top_footer i {
			width: 10rpx;
			height: 16rpx;
			display: inline-block;
			margin: 0 0 0 16rpx;
			background: url(../../static/img/house/rightw@2x.png) no-repeat;
			background-size: 100%;
		}

		.head {
			width: 686rpx;
			height: auto;
			background: #FFFFFF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			opacity: 1;
			margin: 0 32rpx 16rpx;
			display: block;
			float: left;
			position: relative;
			z-index: 1;
		}

		.head_top {
			width: 100%;
			height: auto;
			padding: 28rpx 24rpx 0;
			box-sizing: border-box;
			font-size: 32rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #000000;
			line-height: 44rpx;
			display: block;
			float: left;
		}
	}

	.charts-box {
		width: 100%;
		height: 350rpx;
		display: block;
		float: left;
		margin: 0 0 0;
		/* 		position: relative;
		z-index: 2; */
	}


	.lists {
		width: 638rpx;
		height: auto;
		display: block;
		float: left;
		margin: 0 24rpx 6rpx;
	}

	.list {
		width: 100%;
		height: auto;
		display: block;
		float: left;
		margin: 24rpx 0 0;
		padding: 0 0 24rpx;
		border-bottom: 1rpx solid rgba(190, 190, 190, 0.5);
	}

	.list:last-child {
		border-bottom: 0;
	}

	.list_tags {
		width: auto;
		line-height: 30rpx;
		box-sizing: border-box;
		padding: 0 12rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		height: 30rpx;
		background: #FE5700;
		border-radius: 16rpx 16rpx 16rpx 0rpx;
		opacity: 1;
		margin: 0 0 10rpx;
		display: block;
		float: left;
	}

	.list_title {
		width: 100%;
		height: auto;
		opacity: 1;
		display: block;
		float: left;
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		line-height: 40rpx;
	}

	.list_main {
		width: 100%;
		height: auto;
		opacity: 1;
		display: block;
		float: left;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #919191;
		line-height: 34rpx;
	}

	.list_main span {
		color: #FE5700;
	}

	.footboxs {
		margin: 0 24rpx 0;
		padding: 0 0 24rpx;
		width: 638rpx;
		height: auto;
		opacity: 1;
		display: block;
		float: left;
		border-bottom: 1rpx solid rgba(190, 190, 190, 0.5);
	}

	.footbox {
		width: 33%;
		height: auto;
		display: block;
		float: left;
		box-sizing: border-box;
	}

	.footbox_top {
		width: 100%;
		height: 32rpx;
		font-size: 22rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #BEBEBE;
		line-height: 32rpx;
		text-align: center;
		display: block;
		float: left;
		margin: 0 0;
	}


	.footbox_main {
		width: 100%;
		font-size: 40rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #000000;
		line-height: 56rpx;
		text-align: center;
		display: block;
		float: left;
		margin: 0 0 0;
	}

	.footbox_main span {
		display: inline-block;
		font-size: 22rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #000000;
		line-height: 32rpx;
	}

	.footbox_foot {
		width: 100%;
		font-size: 22rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 32rpx;
		text-align: center;
		display: block;
		float: left;
		margin: 0 0 0;
	}

	.footbox_foot span {
		font-size: 22rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #2DD781;
		line-height: 32rpx;
	}

	.footbox_foot span.up {
		color: #FE5700;
	}


	.footbox_foot em {
		height: 20rpx;
		width: 20rpx;
		display: inline-block;
		margin: 0 0 -5rpx 5rpx;
	}

	.footbox_foot em.down {
		background: url(../../static/img/house/server_down.png) no-repeat;
		background-size: 100%;
	}

	.footbox_foot em.up {
		background: url(../../static/img/house/server_up.png) no-repeat;
		background-size: 100%;
	}


	.box_more {
		width: 100%;
		height: auto;
		font-size: 24rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #000000;
		line-height: 34rpx;
		text-align: center;
		display: block;
		float: left;
		margin: 32rpx 0 0;
	}

	.box_more i {
		width: 11rpx;
		height: 18rpx;
		display: inline-block;
		margin: 10rpx 0 0 12rpx;
		background: url(../../static/img/house/more.png) no-repeat;
		background-size: 100%;
	}

	.box {
		width: 638rpx;
		height: auto;
		margin: 32rpx 0 0 26rpx;
		padding: 0 0 32rpx;
		opacity: 1;
		border-bottom: 1rpx solid rgba(190, 190, 190, 0.5);
		display: block;
		float: left;
	}


	.box_right {
		width: 390rpx;
		height: auto;
		display: block;
		float: right;
	}

	.box_right_top {
		width: 100%;
		height: auto;
		display: block;
		float: left;
		height: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		line-height: 44rpx;
		margin: 8rpx 0 16rpx;
	}

	.box_right_head {
		width: 100%;
		height: auto;
		display: block;
		float: left;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 400;
		color: #919191;
		line-height: 34rpx;
		margin: 0 0 16rpx;
	}

	.box_right_main {
		width: 100%;
		height: auto;
		display: block;
		float: left;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 400;
		color: #919191;
		line-height: 34rpx;
		margin: 0 0 10rpx;
	}

	.box_right_foot {
		width: 100%;
		height: auto;
		display: block;
		float: left;
		font-size: 24rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #000000;
		line-height: 34rpx;
		margin: 15rpx 0 0;
	}

	.box_right_foot span {
		display: inline-block;
		font-weight: 800;
		color: #FF0000;
		font-size: 36rpx;
		font-family: Source Han Sans CN-Heavy, Source Han Sans CN;
		margin: 0 0 0 8rpx;
	}


	.box_left {
		display: block;
		float: left;
		width: 212rpx;
		height: 212rpx;
		position: relative;
		overflow: hidden;
		border: 8rpx;
	}

	.box_leftimg {
		width: 212rpx;
		height: 212rpx;
		display: block;
		/* position: relative; */
		overflow: hidden;
	}

	.box_left i {
		width: 84rpx;
		height: 34rpx;
		display: block;
		position: absolute;
		text-align: center;
		top: 0;
		left: 0;
		overflow: hidden;
		background: url(../../static/img/house/tag.png) no-repeat;
		background-size: 100%;
		padding: 6rpx 8rpx;
		box-sizing: border-box;
		font-size: 16rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 22rpx;
		z-index: 2;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.tags {
		width: 640rpx;
		height: auto;
		display: block;
		float: left;
		margin: 0 0 4rpx 24rpx;
	}

	.tag {
		width: 202rpx;
		height: 96rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		display: block;
		float: left;
		margin: 0 16rpx 0 0;
		border: 1rpx solid rgba(190, 190, 190, 0.5);
		box-sizing: border-box;
	}

	.tag:nth-child(3n) {
		margin-right: 0;
	}

	.tag.active {
		background: rgba(254, 87, 0, 0.05);
		border: 1rpx solid rgba(254, 87, 0, 0.05);
	}

	.tag p {
		width: 100%;
		height: auto;
		display: block;
		float: left;
		margin: 10rpx 0 4rpx;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #000000;
		line-height: 40rpx;
	}

	.tag span {
		width: 100%;
		height: auto;
		display: block;
		float: left;
		margin: 0 0;
		text-align: center;
		font-size: 22rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		font-weight: 400;
		line-height: 32rpx;
	}

	.tag.active p,
	.tag.active span {
		font-weight: bold;
		color: #FE5700;
	}


	.tab {
		width: 640rpx;
		height: 70rpx;
		display: block;
		float: left;
		margin: 12rpx 24rpx 20rpx;
		overflow-y: hidden;
		overflow-x: auto;
		white-space: nowrap;
		overflow: hidden;
		-webkit-overflow-scrolling: touch;
	}

	.tabs {
		width: 640rpx;
		height: 90rpx;
		display: block;
		float: left;
		white-space: nowrap;
		overflow-y: auto;
	}



	.tab p {
		width: auto;
		height: 62rpx;
		margin: 0 32rpx 0 0;
		display: inline-block;
		position: relative;

		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #BEBEBE;
		line-height: 35rpx;
	}

	.tab p i {
		width: 60rpx;
		height: 8rpx;
		background: #FE5700;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		opacity: 1;
		position: absolute;
		bottom: 10rpx;
		left: 50%;
		margin: 0 0 0 -30rpx;
		opacity: 0;
	}

	.tab p.active {
		font-weight: bold;
		color: #000000;
	}

	.tab p.active i {
		opacity: 1;
	}

	.head_footer_right {
		width: 260rpx;
		height: auto;
		display: block;
		float: left;
		margin: 10rpx 0 12rpx;
	}

	.head_footer_right p {
		height: 32rpx;
		font-size: 22rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 32rpx;
		display: block;
		float: left;
		margin: 0 0 12rpx;
	}

	.head_footer_right p i {
		height: 90rpx;
		font-size: 22rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 32rpx;
		display: block;
		float: left;
		margin: 0 4rpx 0 0;
	}

	.head_footer_right p b {
		height: auto;
		font-size: 22rpx;
		font-size: 22rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #000000;
		line-height: 32rpx;
		display: inline-block;
		margin: 0 8rpx 0 0;
	}

	.head_footer_right p em {
		height: 20rpx;
		width: 20rpx;
		display: inline-block;
		margin: 0 0 -5rpx 0;
	}

	.head_footer_right p em.down {
		background: url(../../static/img/house/server_down.png) no-repeat;
		background-size: 100%;
	}

	.head_footer_right p em.up {
		background: url(../../static/img/house/server_up.png) no-repeat;
		background-size: 100%;
	}

	.head_footer_left {
		width: 280rpx;
		height: auto;
		display: block;
		float: left;
		margin: 0 34rpx 16rpx 24rpx;
	}

	.head_one.head .head_footer_left {
		width: 320rpx;
		height: auto;
		display: block;
		float: left;
		margin: 0 64rpx 16rpx 24rpx;
	}

	.head_footer_left p {
		width: 90%;
		height: auto;
		display: block;
		float: left;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #BEBEBE;
		line-height: 34rpx;
	}

	.head_footer_left span {
		width: 90%;
		height: auto;
		display: block;
		float: left;
		height: 66rpx;
		font-size: 48rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		line-height: 66rpx;
	}

	.head_footer_left span em {
		width: auto;
		height: auto;
		display: inline-block;
		height: 32rpx;
		font-size: 22rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		line-height: 32rpx;
		margin-left: 8rpx;
	}

	.head_footer_left i {
		width: 1px;
		background: #BEBEBE;
		height: 78rpx;
		opacity: 1;
		display: block;
		float: right;
		margin: -22rpx 0 0 0;
	}

	.heads_box {
		width: 100%;
		height: 255rpx;
		overflow: hidden;
		display: block;
		float: left;
	}

	.heads {
		width: 718rpx;
		height: 270rpx;
		display: block;
		float: left;
		white-space: nowrap;
		overflow-y: hidden;
		overflow-x: auto;
		margin: 14rpx 0 0 32rpx;
	}

	.head {
		width: 616rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin: 0 16rpx 0 0;
		display: inline-block;
		position: relative;
		z-index: 2;
		/* position: relative; */
	}

	.head_left {
		width: 340rpx;
		height: auto;
		display: block;
		float: left;
		margin: 20rpx 0 16rpx 24rpx;
	}


	.head_one.head {
		width: 686rpx;
	}


	.head_left p {
		width: 100%;
		height: auto;
		display: block;
		float: left;
		height: 44rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		// font-weight: 800;
		color: #000000;
		line-height: 34rpx;
		margin: 0 0 4rpx 0;
	}



	.head_left span {
		width: 100%;
		display: block;
		float: left;
		height: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		line-height: 44rpx;


		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.head_right {
		width: 90rpx;
		height: 90rpx;
		display: block;
		float: right;
		margin: 22rpx 24rpx 20rpx 0;
	}

	.run {
		width: 686rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin: 16rpx 32rpx;
		display: block;
		float: left;
		z-index: 2;
		/* position: relative; */
	}

	.run_top {
		width: 100%;
		height: auto;
		display: block;
		float: left;
		padding: 28rpx 24rpx 30rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		line-height: 44rpx;
		box-sizing: border-box;
	}

	.run_box {
		width: 320rpx;
		height: auto;
		display: block;
		float: left;
		margin: 0 0 0 22rpx;
	}

	.run_boximg {
		width: 56rpx;
		height: 56rpx;
		display: block;
		float: left;
		margin: 8rpx 16rpx 0 0;
	}

	.run_box_right {
		width: 220rpx;
		height: auto;
		display: block;
		float: left;
		margin: 0 8rpx 32rpx 0
	}

	.run_box_right p {
		width: 100%;
		height: auto;
		display: block;
		float: left;
		margin: 0 0 0 0;
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		line-height: 40rpx;
	}

	.run_box_right p i {
		width: 10rpx;
		height: 17rpx;
		display: inline-block;
		margin: 12rpx 0 0 12rpx;
		background: url(../../static/img/house/serve_right.png) no-repeat;
		background-size: 100%;
	}

	.run_box_right span {
		width: 100%;
		height: 32rpx;
		display: block;
		float: left;
		font-size: 22rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #BEBEBE;
		line-height: 32rpx;
	}

	.run_box em {
		height: 32rpx;
		display: block;
		float: right;
		width: 1rpx;
		height: 60rpx;
		opacity: 1;
		background: rgba(190, 190, 190, 0.5);
	}





	page {
		background-color: #F6F6F6;
		/* position:relative; */
		width: 100%;
		height: auto;
		display: block;
		float: left;
		position: relative;
	}

	.top {
		width: 686rpx;
		height: auto;
		display: block;
		float: left;
		margin: 54rpx 32rpx 50rpx;
		/* position: relative; */
		z-index: 1;
	}

	.top_title {
		width: 100%;
		height: 80rpx;
		display: block;
		float: left;
		margin: 0 0 0;
		font-size: 56rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.top_title em {
		display: block;
		float: left;
		margin: 0 8rpx 0 0;
		height: 80rpx;
		width: auto;
	}

	.top_title i {
		display: block;
		float: left;
		margin: 0 8rpx 0 0;
		height: 80rpx;
		width: auto;
		width: auto;
		min-width: 36rpx;
		height: 36rpx;
		line-height: 36rpx;
		text-align: center;
		background: #FE5700;
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		border-radius: 18rpx 18rpx 18rpx 0rpx;
		opacity: 1;
	}

	.toptag {
		width: 100%;
		height: auto;
		display: block;
		float: left;
	}

	.toptag p {
		width: auto;
		height: auto;
		display: block;
		float: left;
		padding: 0 16rpx;
		height: 58rpx;
		line-height: 58rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		border: 1rpx solid #000000;
		margin: 16rpx 16rpx 0 0;
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.toptag p i {
		width: 20rpx;
		height: 20rpx;
		display: inline-block;
		margin: 15rpx 6rpx 0 0;
		background: url(../../static/img/house/edit.png) no-repeat;
		background-size: 100%;
	}


	.top_bj {
		width: 100%;
		height: auto;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}



	.main_footer {
		width: 626rpx;
		height: auto;
		display: block;
		float: left;
		margin: 0 24rpx 32rpx;
	}

	.main_footer span {
		width: 100%;
		height: auto;
		display: block;
		float: left;
		margin: 0 0 16rpx;
		height: auto;
		font-size: 26rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		line-height: 36rpx;
	}

	.main_footer p {
		width: 100%;
		height: auto;
		display: block;
		float: left;
		margin: 0 0 0;
		height: auto;
		font-size: 22rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #919191;

		line-height: 32rpx;
	}

	.main_footer p i {
		color: #FE5700;
		display: inline;
	}

	.main_title {
		width: 638rpx;
		height: 80rpx;
		display: block;
		float: left;
		margin: 30rpx 0 20rpx 20rpx;
		padding: 0 0 20rpx;
		border-bottom: 1rpx solid #BEBEBE;
		position: relative;
	}

	.main_box_title {
		width: 100%;
		height: auto;
		padding: 0 24rpx 0;
		box-sizing: border-box;
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		line-height: 40rpx;
		display: block;
		float: left;
	}



	.main_title_box {
		width: 35%;
		height: auto;
		display: block;
		float: left;
		box-sizing: border-box;
		/* 	position: absolute;
		top: 0;
		left: 0; */
		text-align: center;
	}

	.main_title_box_center {
		/* left: 275rpx; */
	}

	.main_title_box_right {
		/* right: 0;
		left: auto; */
		width: 30%;
	}

	.main_title_box p {
		width: 100%;
		height: auto;
		display: inline-block;
	}

	.main_title_box span {
		width: 100%;
		height: auto;
		display: inline-block;
		margin: 0 0 0 0;
		font-size: 22rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 32rpx;
	}

	.main_title_box p em {
		width: auto;
		height: auto;
		font-size: 40rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: bold;
		color: #000000;
		line-height: 40rpx;
		display: inline-block;
		font-style: normal;
	}

	.main_title_box p b {
		width: auto;
		height: auto;
		font-size: 22rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: bold;
		color: #000000;
		line-height: 22rpx;
		margin: 7rpx 4rpx 0 0;
		display: inline-block;
		font-style: normal;
	}

	.main_title_box p i {
		width: 10rpx;
		height: 16rpx;
		display: inline-block;
		margin: 20rpx 0 0 0;
		background: url(../../static/img/house/right@2x.png) no-repeat;
		background-size: 100%;
	}

	.main_title_box_right span {
		maring-right: 40rpx;
		/* padding-right: 33rpx; */
		box-sizing: border-box;
	}


	.main_title_box_left span {
		/* padding-left: 28rpx; */
		box-sizing: border-box;
	}

	.main_title_box_center span {
		padding-left: 5rpx;
		box-sizing: border-box;
	}



	.main {
		width: 686rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		margin: 0 32rpx 16rpx;
		display: block;
		float: left;
		/* position: relative; */
		z-index: 1;
	}

	.main_top {
		width: 100%;
		height: auto;
		padding: 28rpx 24rpx 0;
		box-sizing: border-box;
		font-size: 32rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		line-height: 44rpx;
		display: block;
		float: left;
		margin: 5rpx 0 0 0;
		/* position: relative; */
	}

	.main_top p {
		width: auto;
		height: 44rpx;
		display: block;
		float: left;
	}

	.main_top p i {
		width: auto;
		height: 44rpx;
		display: block;
		float: left;
		line-height: 44rpx;
		margin: -8rpx 0 0 0;
	}

	.main_top p em {
		width: auto;
		height: 30rpx;
		border-radius: 16rpx 16rpx 16rpx 0rpx;
		opacity: 1;
		border: 2rpx solid #FE5700;
		padding: 0 5rpx;
		box-sizing: border-box;
		font-size: 22rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FE5700;
		line-height: 30rpx;
		display: block;
		float: left;
		margin: 0rpx 0 0 5rpx;
	}


	.main_top span {
		width: auto;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #919191;
		line-height: 34rpx;
		display: block;
		float: right;
	}

	.main_top span i {
		width: auto;
		height: auto;
		display: block;
		float: right;
	}

	.main_top span em {
		width: 10rpx;
		height: 16rpx;
		display: inline-block;
		float: right;
		margin: 10rpx 0 0 10rpx;
		background: url(../../static/img/house/righth@2x.png) no-repeat;
		background-size: 100%;
	}

	.list_more {
		border-top: 1rpx solid rgba(190, 190, 190, 0.5);
		padding: 32rpx 0 0;
		margin-top: 0;
	}

	.main_server {
		margin-top: 14rpx;
		padding-bottom: 32rpx;
	}

	.main_list {
		padding-bottom: 32rpx;
	}

	.box_more_top {
		margin: 20rpx 0 32rpx 0;
	}

	.swiper_boxs {
		width: 686rpx;
		height: 270rpx;
		display: block;
		float: left;
		margin: 14rpx 0 0 32rpx;
	}

	.swiper_box {
		width: 616rpx;
		height: 270rpx;
		display: block;
		float: left;
	}

	.swiper_boxs .head {
		width: 616rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin: 0 0 0 0;
		display: inline-block;
		position: relative;
		z-index: 2;
	}

	.hr {
		width: 100%;
		height: 146rpx;
		display: block;
		float: left;
	}

	.ell {
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
</style>